<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElSelect, ElOption, ElTag, ElTable, ElTableColumn } from 'element-plus'
import { JsonViewer } from 'vue3-json-viewer'
import 'vue3-json-viewer/dist/index.css'
import axios from 'axios'
import { AgentMapAPI } from '../../api/BackendAPI'

const totalBnsList = ref([])
const brokerMapData = ref({})
const topicMapData = ref({})
const loading = ref(true)


// 获取部署地图数据
const fetchKafkaMapData = async () => {
    try {
        loading.value = true
        // 模拟网络延迟
        const response = await axios.get(AgentMapAPI.GET_KAFKA_MAP)
        totalBnsList.value = response.data.data.bns
        brokerMapData.value = response.data.data.brokers
        topicMapData.value = response.data.data.topics
    } catch (error) {
        console.error('获取kafka部署地图数据失败:', error)
        // 可以添加错误提示
    } finally {
        loading.value = false
    }
}

// 组件挂载时获取数据
onMounted(() => {
    fetchKafkaMapData()
})

// 将数据转换为表格格式
const tableData = computed(() => {
    const bnsList = totalBnsList.value || []
    const data = bnsList.map((bns) => {
        const row = { bns }
        row['brokers'] = brokerMapData.value[bns] || []
        row['topics'] = topicMapData.value[bns] || []
        return row
    })
    
    data.sort((item1, item2) => {
        return item1.bns.localeCompare(item2.bns)
    })
    return data
})

// 根据状态获取标签类型
const getTagType = (status) => {
    return status === 'health' ? 'success' : 'warning'
}

// 添加broker抽屉相关的状态
const brokerDrawerVisible = ref(false)
const brokerDetailData = ref(null)

// 添加topic抽屉相关的状态
const topicDrawerVisible = ref(false)
const topicDetailData = ref(null)

// 获取agent详细数据
const fetchKafkaBrokerDetailData = async (hostname, bns) => {
  try {
      // 模拟网络延迟
      const encodedHostname = encodeURIComponent(hostname)
      const encodedBns = encodeURIComponent(bns)

      const response = await axios.get(`${AgentMapAPI.GET_KAFKA_INFO}?hostname=${encodedHostname}&bns=${encodedBns}`)
      brokerDetailData.value = response.data.data
  } catch (error) {
      console.error('获取kafka详情数据失败:', error)
      // 可以添加错误提示
  } finally {
  }
}

// broker tag点击事件处理函数
const handleBrokerTagClick = (item) => {
    brokerDrawerVisible.value = true
    fetchKafkaBrokerDetailData(item.hostname, item.bns)
}

// topic tag点击事件处理函数
const handleTopicTagClick = (item) => {
    topicDrawerVisible.value = true
    topicDetailData.value = item
}

</script>

<template>

  <el-card class="box-card" shadow="never" style="margin:10px;">
    <el-table 
      :data="tableData" 
      style="width: 100%; margin-top: 20px"
      resizable
      border
    >
      <el-table-column prop="bns" label="BNS" width="350" />
      <el-table-column label="Brokers" width="350">
        <template #default="scope">
          <div v-for="item in scope.row.brokers" class="tags-container">
            <el-tag
              :key="item.hostname"
              :type="getTagType(item.status)"
              @click="handleBrokerTagClick(item)"
              style="cursor: pointer;"
            >
              {{ item.hostname }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="Topics">
        <template #default="scope">
          <div v-for="item in scope.row.topics" class="tags-container">
            <el-tag
              :key="item.topic" 
              :type="getTagType(item.status)"
              @click="handleTopicTagClick(item)"
              style="cursor: pointer"
            >
              {{ item.topic }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 添加broker抽屉组件 -->
  <el-drawer
    v-model="brokerDrawerVisible"
    title="broker详细信息"
    direction="rtl"
    size="30%"
  >
    <json-viewer
      v-if="brokerDetailData"
      :value="brokerDetailData"
      :expand-depth="3"
      copyable
      boxed
    />
   
  </el-drawer>

  <!-- 添加topic抽屉组件 -->
  <el-drawer
    v-model="topicDrawerVisible"
    title="topic详细信息"
    direction="rtl"
    size="30%"
  >
    <json-viewer
      v-if="topicDetailData"
      :value="topicDetailData"
      :expand-depth="3"
      copyable
      boxed
    />
   
  </el-drawer>

</template>

<style scoped>
.container {
  padding: 20px;
}

.tags-container {
  margin: 4px 0;
}

:deep(.el-table) {
  border-top: 1px solid #dcdfe6;
  border-left: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  /*border-right: 1px solid #dcdfe6;*/
}

:deep(.el-table td),
:deep(.el-table th) {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
}

:deep(.el-table th) {
  font-weight: bold;
  font-size: 14px;
  background-color: #f2f2f2; /* 浅灰色 */
  color: #333; /* 深灰色 */
}

:deep(.el-select-dropdown__item) {
  font-weight: normal !important;
}
</style>